11. Math visualizatoin and text visualization

Today's topics

Math visualization

Security visualization

Text visualization

Math visualization

Drawing graphs

Drawing data

Math visualization systems

Symbolic formula manipulation

Understanding formla

Graph drawing systems

Data plot

Using mathematical computation systems

Formula manipulation

Expansion, differentiation, integration

Numerical calbulation

Data analysis

Visualization

Mathematical computation systems

Mathematica

Maple

Maxima

Matlab

Mathematica

Wolfram Research

High functionality

Very expensive

https://gyazo.com/8f1fe3567d3bf86299261378f304d300.png

Stephen Wolfram

https://gyazo.com/f4971d6b9b756600a5bd48e860e5d16b.png

A New Kind of Science

https://gyazo.com/87c4ba7ed4c21e04d322becda798ce8a.png

Wolfram Alpha

Answer to natural language query

https://gyazo.com/5dd6bbf3f09d72c7b0e6e6cae92a5a57.png

Maple

http://www.cybernet.co.jp/maple/images/example/engineering/062_Vibration1_38.gif

Matlab

https://gyazo.com/b8d66bbfb7e5b308eb3ca21b46829d90.png

Maxima

Free formula manipulation system

Successor of Macsyma

Uses gnuplot

Maxima

https://gyazo.com/d2f22dcc98fce43a822eec79d7ce072d.png

gnuplot

Free graph drawing tool

Data drawing and graph drawing

Limited features, but usually enough

Various output formats

Installing gnuplot

% brew install gnuplot --with-aquaterm --with-x11

Drawing line plot

plot "line.txt" with lines

https://gyazo.com/75a47e00c05072bf9dd7249407c44060.png

line.txt

code:lines.txt

Scatterplot

plot "scatter.txt" using ($1):($2) with points

https://gyazo.com/a6d32e3e7fb44004471668450052f52e.png

scatter.txt

code:scatter.txt

10 100

30 70

100 100

100 10

3D drawing

code:3d.gnuplot

splot -10:10 -10:10 sin(sqrt(x*x+y*y))/sqrt(x*x+y*y)

https://gyazo.com/d42c39d962f643651d3d2e97fc3eb192.png

Understanding Fractal

https://gyazo.com/d01f21d8c6f4047c42f3957b7da473f0.png

Drawing access history of Wiki pages

https://gyazo.com/2ff2f009f8475336b0dbd4644c81f43b.png

Using log plot

Power low is shown

https://gyazo.com/a6f8baa0d1224124289e7df23bbe1d4f.png

Fractal

Whole shape and portion shape are similar

https://gyazo.com/a6ca73d659bc9fbe44310f62eb53765e.png

Mandelbrot set

https://gyazo.com/64ac64a957c97e49ca241a23683843e5.png

gnuplot program

code:mangel.gnuplot

complex(x,y) = x*{1,0}+y*{0,1}

mandel(x,y,z,n) = (abs(z)>2.0 || n>=100) ? n : mandel(x,y,z*z+complex(x,y),n+1)

set xrange -1.5:0.5

set yrange -1:1

set logscale z

set isosample 50

set hidden3d

set contour

splot mandel(x,y,{0,0},0) notitle

% gnuplot -p mandel.gnuplot

Contour plot

https://gyazo.com/cbbca68102e7c5ef230b45fc5ad70334.png

Contour map

https://gyazo.com/0759ea0cfc625a30be3231a9bdb1f57d

Google Visualization API

https://gyazo.com/7be8126f37936ebe2c6161a4ae7a968c.png

Google Visualization API example

https://gyazo.com/d332d1ee2085d17d6e2482de9c4b4ca5.png

Security visualization

Visualizing access log, etc.

Easy to detect strange attacks

Widely used recently

VisSec conference

https://gyazo.com/0934cdfc55ba93572adf244e2c6badb6

Access log example

Text-based

https://gyazo.com/6c19dc1632eb5d3c99e35427f4f8d988.png

Mie-log

https://gyazo.com/460ba46761e761b034505c588523008f.png

Security Data Visualization

https://gyazo.com/49b020c07b1c7a53f4abb3617d856487.png

RUMINT

CACMの表紙

https://gyazo.com/e2f43dc83f872e0a1932aa09e0389d8a.png

RUMINT

https://gyazo.com/2cd2160955adbdecabf84ecc592dd658.png

RUMINT

https://gyazo.com/5761fc4c9814187cda686ee16b573c1e.png

Applied Security Visualization

https://gyazo.com/08acd1a676ea2eb8c35c28923a783fbb.png

Visualization of link spam

By Toyoda @ University of Tokyo

https://gyazo.com/ece0722eb625730396d7b373352e2a64.png

Visualization of link spam

http://www.mtoyoda.com/tdiary/images/20080305_0.jpg

Nicter

Net attack monitoring system

https://www.youtube.com/watch?v=aVEBV_xC-Bc

http://www.youtube.com/watch?v=jLYs52OBh_A

DAEDALUS

Security visualization by NICT

https://www.youtube.com/watch?v=f44eum6Hz50

https://gyazo.com/88412baede840e74b0ab7d08f0431bd0.png

Text visualization

Color

Font

Size

Animation

Prittyprinting

Making codes readable

code:test.c

int i;

for (i=0;i<100;i++){

int ret = func(i);

if (ret < 0) perror("Error");

}

Markup language

Insert various markup tags in text

Text formatting systems

Scribe

Roff

TeX

HTML

Scribe

Developed by Brian Reid at CMU

Very popular in CMU in 1990

For papers, technical reports

Almost extinct

Scribeマニュアル

https://gyazo.com/6febaa039e718d9d3cf4941c73d7909b.png

Scribe notations

https://gyazo.com/2e9f49c5d0530b4d33576a9b1dfb4e12.png

Scribe notations

https://gyazo.com/038e5a90cac8236632cb23f5cee3f15f.png

Remnant of Scribe

BibTeX notation

code:bibtex

@BOOK{Lamport:LaTeX,

AUTHOR = "Leslie Lamport",

TITLE = "LaTeX User's Guide and Document Reference Manual",

PUBLISHER = "Addison-Wesley Publishing Company",

ADDRESS = "Reading, Massachusetts",

YEAR = "1986" }

Brian Reid

Lawsuit with Google

IPOの9日前にGoogleをクビになった

https://gyazo.com/775ec36f72848a023a3b06e8b70e0e9a

Roff

Oldest text formatting system

Used in Unix man command

man example

code:man

.SH DESCRIPTION

.B man

formats and displays the on-line manual pages. If you specify

.IR section ,

.B man

only looks in that section of the manual.

.I name

is normally the name of the manual page, which is typically the name

of a command, function, or file.

However, if

.I name

contains a slash

nroff output

https://gyazo.com/db87f7e4fe08ba579972a7296145a19f.png

troff output

https://gyazo.com/2a1c98a8a95c6a584cf30a0df6ff08c7.png

RTF (Rich Text Format)

Markup notation introduced in Word

Influenced by TeX

Not human-readable

code:rtf

{\rtf1\ansi\ansicpg932\cocoartf949\cocoasubrtf430

{\fonttbl\f0\fswiss\fcharset0 Helvetica;}

{\colortbl;\red255\green255\blue255;}

\paperw11900\paperh16840\margl1440\margr1440\vieww9000\viewh8400\viewkind0

\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102

\tx5669\tx6236\tx6803\ql\qnatural\pardirnatural

\f0\i\fs50 \cf0 abc}

TeX

Text formatting system by Donald Knuth

Based on macro programming

Donald Knuth

https://gyazo.com/5ed69a83a6c5d87930171fbdda179bc1.png

TeX example

code:texsample.tex

This is \TeX.

\par

\centerline{$-b \pm \sqrt{b^2 - 4ac} \over 2a$}

\par

\font\helv=Helvetica scaled \magstep 5 \relax

\helv

This is \TeX.

\end

Result

https://gyazo.com/a16220b1db81c22585964bf2ace15803.png

Runninng TeX

% ptex texsample.tex

% dvipdfm texsample

% open texsample.pdf

LaTeX

"Better" version of TeX

code:latexsample.tex

File Edit Options Buffers Tools TeX Text Help

\documentclass{jsarticle}

\begin{document}

\begin{itemize}

\item This is a \LaTeX2e{} sample document.

\item {\Large Large font}

\item {\Huge HUGE font}

\end{itemize}

\end{document}

Runninng LaTeX

% platex latexsample.tex

% dvipdfm latexsample

% open latexsample.pdf

Result

https://gyazo.com/1af1fc3fae9e24d87a767bc19f0b653a

HTML

Markup for the Web